<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title>K12试听课预约平台</title>
    <link rel="stylesheet" href="../lib/fontawesome/all.min.css">
    <link rel="stylesheet" href="../lib/layer/theme/default/layer.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/uc.css">
</head>
<body>

<div id = app>
    <!-- 页头 -->
    <div class="page-header">
        <div class="top-bar">
            <a href="/user/index" class="brand">
                <i class="far fa-clock yellow"></i>
                <span class="brand orange">K12试听课预约平台</span>
            </a>
        </div>
        <div class="user-header">
            <div class="bg"></div>
            <div class="avatar">
                <img :src="user.avatar" alt="">
            </div>
            <div class="info">
                <p class="title">
                    <span v-text="user.nickname"></span>
                </p>
                <p class="account">
                    <span>账户余额：</span>
                    <span v-text="user.balance"></span>
                    <span>元</span>
                </p>
            </div>
            <div class="setting">
                <a href="setting.html">个人中心&gt;</a>
            </div>
        </div>
    </div>

    <!-- 页面主体 -->
    <div class="main-body">
        <div class="page-menu">
            <span v-for="m in pd.pageMenus.menus" v-text="m.title" :class="{active: pd.pageMenus.mid == m.id}" @click="changeMenu(m.id)"></span>
        </div>
        <!-- 用户页面 -->
        <div id="user-page" v-if="pd.pageMenus.mid == 1">
            <div class="order-block">
                <div class="title">
                    <i class="far fa-calendar-alt"></i>
                    <span>我的预约</span>
                </div>
                <div class="items" v-for="c in pd.userCount">
                    <a :href="c.url" class="item">
                        <span v-text="c.title"></span>
                        <span class="tip" v-if="c.count > 0" v-text="c.count"></span>
                    </a>
                </div>
            </div>

            <div class="user-menus">
                <a class="menu" href="#">
                    <i class="far fa-star"></i>
                    <span>我的收藏</span>
                    <span>&gt;</span>
                </a>
                <a class="menu" href="#">
                    <i class="fas fa-sun"></i>
                    <span>我的特权</span>
                    <span>&gt;</span>
                </a>
                <a class="menu" href="#">
                    <i class="fas fa-star-of-david"></i>
                    <span>预约宝典</span>
                    <span>&gt;</span>
                </a>
            </div>

        </div>

        <!-- 商家页面 -->
        <div id="merchant-page" v-if="pd.pageMenus.mid == 2">
            <div id="merchant" v-if="user.merchant">
                <div class="order-block">
                    <div class="title">
                        <i class="far fa-calendar-alt"></i>
                        <span>我的预约</span>
                    </div>
                    <div class="items" v-for="c in pd.merchantCount">
                        <a :href="c.url"  class="item">
                            <span v-text="c.title"></span>
                            <span class="tip" v-if="c.count > 0" v-text="c.count"></span>
                        </a>
                    </div>
                </div>

                <div class="service-block">
                    <div class="title">
                        <i class="far fa-heart"></i>
                        <span>我的服务</span>
                        <a href="/service/serviceForm">+</a>
                    </div>
                    <ul class="services">
                        <li v-for="s in pd.services" class="service">
                            <div class="image">
                                <img :src="s.image">
                            </div>
                            <div class="content">
                                <p v-text="s.title"></p>
                            </div>
                            <div class="action">
                                <label v-if="s.status == 1" class="enable">已上架</label>
                                <label v-else-if="s.status == 0" class="wait">待审核</label>
                                <label v-else class="disable">已下架</label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="apply" class="apply" v-else>
                <p class="apply-info">亲，您还没开通商家服务哦！</p>
                <a class="button" href="apply.html">立即申请</a>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="page-foot">
        <div class="hr"></div>
        <span class="info">&copy;2019 软赢科技 版权所有</span>
    </div>

</div>

</body>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/vue.min.js"></script>
<script src="../lib/layer/layer.js"></script>
<script src="../js/main.js"></script>
<script src="../js/uc.js"></script>
</html>